<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>报表管理</title>

    <script src="/static/js/polyfill.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/heyui.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/less.min.js"></script>
    <script src="/static/js/api.js"></script>
    <script src="/static/js/browser.min.js"></script>
    <link rel="stylesheet" href="/static/css/index.css"/>
</head>

<body style="padding:24px;">
<div id="app">
    <div class="h-panel">
        <div class="h-panel-bar">
            <span class="h-panel-title">报表管理</span>
            <div class="h-panel-right">
                <Search placeholder="查询" v-model="name" v-width="200"></Search>
                <i class="h-split"></i>
                <button class="h-btn h-btn-green h-btn-m" @click="loadList">查询</button>
            </div>
        </div>
        <div class="h-panel-bar">
            <span class="link" @click="add">新增</span>
            <i class="h-split"></i>
            <span class="link" @click="edit">编辑</span>
            <i class="h-split"></i>
            <span class="link" @click="del">删除</span>
            <i class="h-split"></i>
            <span class="link" @click="down">下载</span>
        </div>
        <div class="h-panel-body bottom-line">
            <h-table ref="table" :datas="datas" checkbox :columns="columns" :loading="loading"></h-table>
        </div>
        <div class="h-panel-bar">
            <h-pagination :cur="page.cur" :small="true" :total="page.total" align="right"
                          @change="paging"></h-pagination>
        </div>
        <Modal v-model="opend">
            <div slot="header">下载报表</div>
            <h-form>
                <h-formitem label="连接名">
                    <input v-model="dm" placeholder="连接名" class="h-input"/>
                </h-formitem>
                <h-formitem label="查询条件">
                    <h-taginput v-model="dataStr" placeholder="name=1" wordlimit="100000" v-width="500"
                                limit="1000000"></h-taginput>
                </h-formitem>
            </h-form>
            <div slot="footer">
                <button class="h-btn" @click="opend=false">取消</button>
                <button class="h-btn h-btn-primary" @click="downNet">确定</button>
            </div>
        </Modal>
    </div>
</div>

<script type="text/babel">
    new Vue({
        el: "#app",
        created() {
            this.loadList();
        },
        data() {
            return {
                page: {cur: 1, size: 10, total: 0},
                dm: '',
                dataStr: [],
                actionType: 1,
                opend: false,
                name: '',
                loading: false,
                columns: [
                    {title: '主键', prop: 'id', width: 100},
                    {title: '名称', prop: 'name'},
                    {title: '展示参数', prop: 'params'},
                    /*{title: '中文标题', prop: 'colsTitle'},
                    {title: '英文列名', prop: 'colsEnName'},*/
                    /*{title: '函数定义', prop: 'funcType'},*/
                    //{title: '查询语句', prop: 'execSql'},
                    // {title: '查询条件', prop: 'sqlWhere'},
                ],
                datas: [],
                queryData: {},
                verify: {
                    required: [
                        'id',
                        'name',
                        'colsTitle',
                        'execSql',
                        'colsEnName',
                        'params',
                    ]
                },
                model: {
                    id: '',
                    name: '',
                    colsTitle: '',
                    funcType: '',
                    execSql: '',
                    sqlWhere: '',
                    colsEnName: '',
                    params: '',
                }
            }
        },
        methods: {
            loadList() {
                this.loading = true;
                api.get("/report", {...this.page, ...{name: this.name}}).then(res => {
                    console.log(res.data)
                    this.loading = false;
                    this.datas = res.data.data || [];
                    this.page.total = res.data.total || 0;
                }).catch(err => {
                    console.log(err)
                    this.loading = false;
                    this.$Message.error(err);
                });
            },
            paging(page) {
                this.page = page;
                this.loadList(this.page);
            },
            add() {
                let selections = this.$refs.table.getSelection();
                if (selections.length != 1) {
                    location.href = "/v/form.html";
                    return;
                }
                this.model = selections[0];
                location.href = "/v/form.html?id=" + this.model.id;
            },
            edit() {
                let selections = this.$refs.table.getSelection();
                if (selections.length != 1) {
                    this.$Message.warn('请勾选任意一条数据');
                    return;
                }
                this.model = selections[0];
                location.href = "/v/form.html?id=" + this.model.id;
            },
            del() {
                let selections = this.$refs.table.getSelection();
                if (selections.length != 1) {
                    this.$Message.warn('请勾选任意一条数据');
                    return;
                }
                let id = selections[0].id;
                this.$Confirm("确定删除？", "提示").then(() => {
                    api.delete("/report/" + id).then(res => {
                        this.loadList();
                    }).catch((err) => {
                        this.$Message.error(err);
                    });
                });
            },

            down() {
                this.opend = true;
            },
            downNet() {
                for (let index in this.dataStr) {
                    let kv = this.dataStr[index].split("=");
                    this.queryData[kv[0].trim()] = kv[1].trim();
                }
                let selections = this.$refs.table.getSelection();
                if (selections.length != 1) {
                    this.$Message.warn('请勾选任意一条数据');
                    return;
                }
                if (!this.dm) {
                    this.$Message.warn('连接名不可为空');
                    return;
                }
                let id = selections[0].id;
                this.$Loading("下载中...");
                axios({
                    method: 'put',
                    timeout: 1000 * 60 * 10,
                    url: '/reports/' + this.dm + "/" + id,
                    data: this.queryData,
                    responseType: 'blob'
                }).then(res => {
                    console.log("下载响应")
                    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});
                    let contentDisposition = res.headers['content-disposition'];
                    let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
                    let result = patt.exec(contentDisposition);
                    let filename = decodeURIComponent(result[1]);
                    let downloadElement = document.createElement('a');
                    let href = window.URL.createObjectURL(blob);
                    downloadElement.style.display = 'none';
                    downloadElement.href = href;
                    downloadElement.download = filename;
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                    this.$Loading.close();
                }).catch((error) => {
                    this.$Loading.close();
                })
            },
            submit() {
                if (this.actionType == 1) {
                    api.post("/report", this.model).then(res => {
                        this.loadList();
                        this.opend = false;
                    });
                } else if (this.actionType == 2) {
                    api.put("/report/" + this.model.id, this.model).then(res => {
                        this.loadList();
                        this.opend = false;
                    });
                }

            },
        },
    })
</script>
</body>

</html>